<template>
  <div class="CourseList">
    <swipe></swipe>
    <v-touch v-on:swipeleft="swiperight()" v-on:swiperight="swipeleft()">
      <div class="week">
        <ul class="weekUl">
          <li class="weekli"  v-for="(item,index) in weeks" @click="clickWeek(weeks, index)"> {{ item.week }}</li>
        </ul>
        <div class="DateBox">
          <!--<p class="p01">{{p01}}</p>-->
          <p class="p02">{{p02}}</p>
        </div>
      </div>
    </v-touch>
    <div class="listBox">
      <v-touch v-on:swiperight="swiperight" v-on:swipeleft="swipeleft" v-bind:swipe-options="{ direction: 'horizontal', threshold: 100 }">
        <div class="listIN" :style="{height: height}">
          <div class="classList" v-for="listBox in listBoxs" :style="{height: height}">
            <div class="_2mIow" @click="UserOpenLocation()">{{listBox[0].data.Store.data.name
              }}<span>查看地图</span></div>
            <router-link :to="{ name: 'classDetail' }">
              <div class="box" v-for="(Schedule,index) in listBox" @click="clickId(listBox, index)">
                <div class="left">
                  <img src="../../assets/images/default.png">
                </div>
                <div class="center">
                  <h2>{{Schedule.data.Course.data.title}}</h2>
                  <p class="p2"><span>{{Schedule.data.Trainer.data.name}}</span></p>
                  <p class="p3"><span class="time">{{Schedule.data.weekday_time}}</span></p>
                </div>
                <div class="right">
                  <div class="_14rKO">
                    <div>预约</div>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </v-touch>
    </div >
    <footer-in v-if="footerShow"></footer-in>
  </div>
</template>

<script>
  import Swipe from '@/components/swipe.vue'
  import FooterIn from '@/components/footer.vue'
  import { requestSchedules } from '../../api/api'
  export default {
    name: 'classList',
    data () {
      return {
        footerShow: true,
        height: '',
        listBoxs: [],
        'p02': '周一',
        weeks: [
          {
            week: '一'
          },
          {
            week: '二'
          },
          {
            week: '三'
          },
          {
            week: '四'
          },
          {
            week: '五'
          },
          {
            week: '六'
          },
          {
            week: '日'
          }
        ]
      }
    },
    components: {
      'Swipe': Swipe,
      FooterIn
    },
    mounted: function () {
      this.$nextTick(function () {
        this.lodaSchedules()
      })
    },
    methods: {
//      获取课程列表
      lodaSchedules () {
        const screenHeight = window.innerHeight / (window.innerWidth / 3.2)
        this.height = screenHeight - 0.8 - 0.32 - 0.49 + 'rem'
        if (this.$route.query.footerShow) {
          if (this.$route.query.footerShow === '1') {
            this.footerShow = false
            this.height = screenHeight - 0.8 - 0.32 + 'rem'
          }
        }
        let e = this
        requestSchedules({}).then((res) => {
          const obj = res.data
          let arr = []
          for (let key in obj) {
            arr.push(obj[key])
          }
          e.listBoxs = arr
        })
      },
//      点击存储SchedulesId
      clickId (listBox, index) {
        const SchedulesId = listBox[index].data.id
        window.localStorage.setItem('SchedulesId', JSON.stringify(SchedulesId))
      },
//      日期点击事件
      clickWeek: function (weeks, index) {
        this.p02 = `周${this.weeks[index].week}`
        const liBox = document.querySelectorAll('.weekUl li')
        const listIN = document.getElementsByClassName('listIN')
        const DateBox = document.getElementsByClassName('DateBox')
        for (var i = 0; i < liBox.length; i++) {
          liBox[i].index = i
        }
        const left = event.target.index
        DateBox[0].style.left = left * 14.28 + '%'
        const num = -14.28 * left + '%'
        listIN[0].style.transform = `translateX(${num})`
      },
//      课程列表左滑
      swipeleft: function () {
        const listIN = document.getElementsByClassName('listIN')
        const DateBox = document.getElementsByClassName('DateBox')
        let left = parseFloat(DateBox[0].style.left)
        left = left > 0 ? left : 0
        if (left < 85.25) {
          left = left + 14.28
        }
        if (left === 14.28) {
          this.p02 = '周二'
        }
        if (left === 28.56) {
          this.p02 = '周三'
        }
        if (left === 42.839999999999996) {
          this.p02 = '周四'
        }
        if (left > 42.839999999999996 && left < 71.39999999999999) {
          this.p02 = '周五'
        }
        if (left === 71.39999999999999) {
          this.p02 = '周六'
        }
        if (left > 71.39999999999999 && left < 100) {
          this.p02 = '周日'
        }
        DateBox[0].style.left = left + '%'
        listIN[0].style.transform = `translateX(${-left}%)`
      },
//      课程列表右滑
      swiperight: function () {
        const listIN = document.getElementsByClassName('listIN')
        const DateBox = document.getElementsByClassName('DateBox')
        let left = parseFloat(DateBox[0].style.left)
        left = left > 0 ? left : 0
        if (left > 0) {
          left = left - 14.28
        }
        if (left < 14) {
          this.p02 = '周一'
        }
        if (left >= 14) {
          this.p02 = '周二'
        }
        if (left >= 28) {
          this.p02 = '周三'
        }
        if (left >= 42) {
          this.p02 = '周四'
        }
        if (left >= 57) {
          this.p02 = '周五'
        }
        if (left >= 71) {
          this.p02 = '周六'
        }

        if (left === 85.68) {
          this.p02 = '周日'
        }

        DateBox[0].style.left = `${left}%`
        listIN[0].style.transform = `translateX(${-left}%)`
      },
//      获取地理位置
      UserOpenLocation () {
        const res = this.listBoxs[0][0].data.Store.data
        console.log(Number(res.latitude), Number(res.longitude), res.name, res.address)
        window.wx.ready(() => {
          window.wx.openLocation({
            latitude: Number(res.latitude), // 纬度，浮点数，范围为90 ~ -90
            longitude: Number(res.longitude), // 经度，浮点数，范围为180 ~ -180.
            name: res.name, // 位置名
            address: res.address // 地址详情说明
          })
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @yellow: #fddc0a;
  @subject:#e61b64;
  ._2mIow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0.13rem;
    padding-right: 0.13rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #fff;
    font-size: 0.12rem;
    height: 0.3rem;
    margin-right: 0;
    background-color: #111;
    font-weight: 400;
    span{
      font-size:0.11rem;
      line-height: 0.3rem;
      margin-left: auto;
      margin-right: 0;
      color: #999;
    }
  }
  ._2mIow:after{
    content: '';
    width: 8px;
    height: 8px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #999;
  }
  .week{
    width: 100%;
    height: 0.3rem;
    position: relative;
    /*border-bottom: 1px solid #4d4d4d;*/
    border-top: 1px solid #4d4d4d;
    ul{
      width: 100%;
      height: 0.3rem;
      display: flex;
      background: #1c1c1c;
      li{
        width: 14.28rem;
        height: 0.3rem;
        line-height:0.3rem;
        text-align: center;
        justify-content: space-between;
        align-items: center;
        color: #999;
        font-size:0.11rem;
        font-weight: lighter;
      }
    }
    .DateBox{
      height: 0.4rem;
      width: 0.4rem;
      border-radius: 50%;
      border: 2px solid @subject;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      z-index: 2;
      position: absolute;
      top: 50%;
      margin-top:-0.19rem;
      left:0;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      background-image: linear-gradient(180deg,#3f3f3f,#2e2e2e);
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      transition: all .5s;
      p{
        font-size:0.1rem;
      }
      .p01{
        color: #c8c8c8;
      }
      .p02{
        color: #fff;
        font-size:0.12rem;
        font-weight: 900;
      }
    }
  }
  .listBox{
    width: 100%;
    height: auto;
    overflow: hidden;
    .listIN{
      width: 700%;
      height: auto;
      overflow: hidden;
      transform: translateX(0);
      -moz-transform: translateX(0);
      -webkit-transform: translateX(0);
      -o-transform: translateX(0);
      transition: all .5s;
      .classList{
        width: 14.28%;
        height: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        float: left;
        box-sizing: border-box;
        .box{
          width: 100%;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          justify-content: space-between;
          min-height: 92px;
          background-color: #1c1c1c;
          border: 1px solid #2e2e2c;
          .left{
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            img{
              border-radius: 50%;
              width: 0.6rem;
              height: 0.6rem;
              overflow: hidden;
              margin-left: 0.07rem;
              margin-right: 0.15rem;
            }
          }
          .center{
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            width: 0.04rem;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            h2{
              color: #fff;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-weight: 400;
              font-size: 0.15rem;
              line-height: 0.2rem;
              margin-right: 0.1rem;
              margin-top: 0.14rem;
            }
            .p2{
              margin-top: 0.1rem;
              margin-bottom: 0.1rem;
              font-size: 0.11rem;
              color: #999;
              opacity: .9;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap;
              line-height: 0.15rem;
              span{
                display: block;
                white-space: nowrap;
              }
            }
            .p3{
              color: #d7d7d7;
              font-size: 0.11rem;
              white-space: nowrap;
              margin-bottom: 0.14rem;
              .time{
                font-size: 0.11rem;
                color: @subject;
              }

            }
          }
          .right{
            flex-direction: column;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            display: flex;
            position: relative;
            width: 0.5rem;
            ._1zwdp{
              width: 0.34rem;
              height: 0.34rem;
              position: absolute;
              top: 0;
              right: 0;
              text-align: center;
              color: pink;
              clip-path: polygon(0 0,70% 0,100% 30%,100% 100%);
              -webkit-clip-path: polygon(0 0,70% 0,100% 30%,100% 100%);
              background-image: linear-gradient(90deg,#df1b6b,#a61ba3);
              display: flex;
              justify-content: center;
              align-items: center;
              div{
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                padding-bottom: 0.14rem;
                padding-left: 0.02rem;
                font-size: 9px;
                overflow: hidden;
                padding-top: 0;
                line-height: 0.09rem;
              }
            }
            ._14rKO{
              width: 0.4rem;
              height: 0.25rem;
              margin-right: 0.1rem;
              div{
                width: 0.4rem;
                height: 0.25rem;
                line-height:0.25rem;
                text-align: center;
                border: 1px solid @subject;
                color: @subject;
                font-size:0.12rem;
              }
            }
          }
        }
      }
    }
  }
  .null{
    width: 100%;
    height: 0.49rem;
  }
</style>
